import React, { Component } from 'react';
import { MoreOutline, LeftOutline } from 'antd-mobile-icons'
import '../style/Index/register/recode.css'
import services from '../api/interface'
import { Button, Space, Toast } from 'antd-mobile'
class Rcode extends Component {
    state = {
        telcode: ''
    }
    onchange(e) {
        this.setState({
            telcode: e.target.value
        })

    }
    onClickback() {
        this.props.history.go(-1)
    }
    //发送验证码
    async onClickcode() {
        var res = await services.user.user_dosendmsgcode({ tel: this.props.location.state.tel })
        console.log(res.data.data);
        if (res.data.code == 200) {
            Toast.show({
                content:  `您的验证码为${res.data.data}`,
                afterClose: () => {
                    console.log('after')
                },
            })
        }
        this.setState({
            telcode:res.data.data
        })

    }
    async next() {
        var res1 = await services.user.user_docheckcode({ tel: this.props.location.state.tel, telcode: this.state.telcode })
        if (res1.data.code == 200) {
            var res2 = await services.user.user_dofinishregister({ tel: this.props.location.state.tel, password: this.props.location.state.password })
            if (res2.data.code == 200) {
                Toast.show({
                    icon: 'success',
                    content: '注册成功！',
                })
                this.props.history.push('/login')
            }
        }
    }
    render() {
        return (
            <div className='rcode'>
                <div className='dnavbar'>
                    <span onClick={() => { this.onClickback() }}><LeftOutline /></span>
                    <div>注册</div>
                    <div className='dmicon'>
                    </div>
                </div>
                <div className="rcontent">
                    <div className="rcotent_code">
                        <input type="text" placeholder='请输入验证码' value={this.state.telcode} onChange={(e) => { this.onchange(e) }} />
                        <div className="rebox" onClick={() => { this.onClickcode() }}>
                            发送验证码
                        </div>
                    </div>
                    <button onClick={() => { this.next() }}>注册</button>

                </div>
            </div>
        );
    }
}

export default Rcode;